<template>
	<view class="pa-b-130">
		<!--我的故事详情-->
		<view class="pa-20 bg-fff">
			<view class="flex f-between f-center pa-b-30">
				<view>
					<view class="flex f-center">
						<view class="font-bold">醇香麦芽精酿啤酒‌500ml</view>
						<view class="status1 tn-text-md">正式</view>
					</view>
					<view class="ma-t-10 c-aaa tn-text-md">推广时间：2025-01-01 ~ 2025-06-30</view>
					<view class="ma-t-10 c-aaa tn-text-md">股东数：26</view>
				</view>
				<view class="tn-icon-right c-aaa"></view>
			</view>
			<view class="flex f-between pa-tb-40 b-t-1-F5 t-center">
				<view class="width30">
					<view>总积分</view>
					<view class="ma-t-20  ">8777</view>
				</view>
				<view class="width30">
					<view>已提积分</view>
					<view class="ma-t-20  ">177</view>
				</view>
				<view class="width30">
					<view>剩余积分</view>
					<view class="ma-t-20  ">77</view>
				</view>
			</view>
			<view class="flex f-between pa-tb-40 t-center">
				<view class="width30">
					<view>积分价值</view>
					<view class="ma-t-20  ">￥8777</view>
				</view>
				<view class="width30">
					<view>已提金额</view>
					<view class="ma-t-20  ">￥177</view>
				</view>
				<view class="width30">
					<view>市值</view>
					<view class="ma-t-20  tn-color-red">￥77</view>
				</view>
			</view>
		</view>
		
		<view class="bg-fff ma-20 pa-lr-20 b-r-15">
			<view class="flex f-between f-center">
				<view class="pa-lr-20 pa-tb-30  tn-text-bold tn-text-xl tn-color-black">最新公告</view>
				<view class="tn-text-sm c-aaa pa-r-20" @click="toPage('notice')">更多</view>
			</view>
			<view class="">
				<view class="pa-20 b-t-1-F5" v-for="(item,index) in noticelist" :key="index"
					@click="toPage('customerdetail',item)">
			
					<view class="flex">
						<view class="tn-icon-trusty-fill  tn-color-orangered tn-text-xxl ma-t-10"></view>
						<view class="noticecon ma-l-20">
							<view class="">{{item.name}}</view>
							<view class="flex f-between f-center ma-t-20">
								<!-- <view class="tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">#公告</view> -->
								<view class="c-aaa tn-text-sm"><text class="tn-icon-time ma-r-10"></text>2025-09-28 16:57:52</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-fff ma-20 b-r-15">
			<view class="pa-tb-20" style="width: 90vw;overflow: hidden;">
				<tn-tabs :list="scrollList" :current="current"  @change="tabChange" :isScroll="false"  activeColor="#fbbd12" name="name" backgroundColor="#FFFFFF"  :barWidth="150"></tn-tabs>
			</view>
			<block v-if="current==0">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min pa-20 pa-lr-40 b-t-1-F5"
					v-for="(item,index) in integral" :key="index">
					<view class="justify-content-item">
						<view class=" font-bold">
							{{item.name}}
						</view>
						<view class="c-aaa tn-text-sm ma-t-20"><text class="tn-icon-time ma-r-10"></text>{{item.time}}</view>
					</view>
					<view class="justify-content-item tn-text-xl tn-padding-top">
						<view :class="'tn-color-' + item.color + ';'"> {{item.integral}} </view>
					</view>
			
				</view>
			</block>
			<block v-if="current==1">
				<view class="pa-20 pa-lr-40 bg-fff b-t-1-F5" v-for="(item,index) in 10" :key="index" @click="showpolicy=true">
					<view class="flex f-between f-center">
						<view class="pa-b-30">
							<view class="font-bold">故事：醇香麦芽精酿啤酒‌500ml</view>
							<view class="ma-t-20 c-aaa tn-text-sm"><text class="tn-icon-time ma-r-10"></text>2024-01-25 14:25:42</view>
						</view>
						<view class="c-fbbd12">已到账</view>
					</view>
					<view class="flex f-between pa-tb-40 b-t-1-F5 t-center">
						<view class="width30">
							<view>提现积分</view>
							<view class="ma-t-20 font-bold tn-color-red">￥8777</view>
						</view>
						<view class="width30">
							<view>积分价</view>
							<view class="ma-t-20 font-bold tn-color-red">￥177</view>
						</view>
						<view class="width30">
							<view>提现金额</view>
							<view class="ma-t-20 font-bold tn-color-red">￥77</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	
		<!-- <view class="footerfixed dd-glass tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm">
			<tn-goods-nav :options="[]" :buttonGroups="customButtonGroups" buttonType="round" :safeAreaInsetBottom="true" @buttonClick="onButtonClick"></tn-goods-nav>
		</view> -->
		<!--收款账户-->
		<view class="footerfixed dd-glass tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm">
			<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
				<tn-button backgroundColor="#fbbd12" height="90rpx" padding="40rpx 0" width="90%" fontBold @click="onButtonClick" shape="round">
					<text class="tn-icon-plane-fill tn-padding-right-xs tn-color-white"></text>
					<text class="tn-color-white">申请提现</text>
				</tn-button>
			</view>
		</view>
		
		
		<tn-popup v-model="showpolicy" mode="center" :borderRadius="15" :closeBtn="true" width="80%">
			<view class="content">
				<view class="t-center font-bold tn-text-xl pa-tb-20">详情</view>
				<scroll-view scroll-y="true" class="" style="max-height: 800upx;">
					<view class=" pa-lr-40 pa-b-100">
						<!-- 页面内容 -->
						<view>
							<view>记录：</view>
							<view class="time-line__wrap">
								<tn-time-line>
									<block v-for="(item, index) in expressData" :key="index">
										<tn-time-line-item>
											<template slot="content">
												<view>
													<view class="time-line-item__content__time">{{ item.time }}</view>
													<view class="time-line-item__content__desc ma-t-20">{{ item.info }}
													</view>
													<view class="c-aaa tn-text-sm">{{ item.reason }}</view>
												</view>
											</template>
										</tn-time-line-item>
									</block>
								</tn-time-line>
							</view>
						</view>
						<view>
							<view>收款账户</view>
							<view class="c-aaa ma-l-20 pa-l-20 pa-t-20">
								<view>张三</view>
								<view class="ma-t-20 tn-text-sm">中国工商银行深圳东海支行</view>
								<view class="ma-t-10 tn-text-sm">银行卡号：1542 1526 2654 895</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				expressData: [{
						time: '2021-11-11 17:31',
						info: '审核不通过',
						reason: "原因：提交的数据出现错误，请与客服联系40088888888。",
					},
					{
						time: '2021-11-11 17:31',
						info: '审核不通过',
						reason: "",
					}
				],
				showpolicy:false,
				noticelist:[
					{
						name: '醇香麦芽精酿啤酒‌500ML，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-20 22:45:29',
						color: 'blue--dark',
						integral: '+10'
					}, {
						name: '‌沁爽青柠气泡水‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-18 20:20:50',
						color: 'purplered',
						integral: '-260'
					}, {
						name: '‌冰萃冷泡果味茶‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-18 18:11:19',
						color: 'blue--dark',
						integral: '+100'
					}, {
						name: '‌蜜桃乌龙风味汽水‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-17 13:42:42',
						color: 'blue--dark',
						integral: '+100'
					}, {
						name: '‌古法酿造米酒‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-16 12:14:43',
						color: 'blue--dark',
						integral: '+50'
					}, {
						name: '‌活力维C电解质水‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-15 10:21:08',
						color: 'blue--dark',
						integral: '+50'
					}, {
						name: '‌焦糖拿铁即饮咖啡‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-14 08:56:32',
						color: 'blue--dark',
						integral: '+50'
					}
				],
				customButtonGroups: [{
				  text: '申请提现',
				  backgroundColor: '#fbbd12',
				  color: '#ffffff'
				}],
				current: 0,
				scrollList: [{
						name: '积分记录',
					},
					{
						name: '提现记录'
					}
				],
				integral: [{
					name: '醇香麦芽精酿啤酒‌500ML，购买2箱成功',
					time: '2022-05-20 22:45:29',
					color: 'blue--dark',
					integral: '+10'
				}, {
					name: '‌沁爽青柠气泡水‌，提现（260积分）已提交。',
					time: '2022-05-18 20:20:50',
					color: 'purplered',
					integral: '-260'
				}, {
					name: '‌冰萃冷泡果味茶‌，购买7箱成功',
					time: '2022-05-18 18:11:19',
					color: 'blue--dark',
					integral: '+100'
				}, {
					name: '‌蜜桃乌龙风味汽水‌，购买32箱成功',
					time: '2022-05-17 13:42:42',
					color: 'blue--dark',
					integral: '+100'
				}, {
					name: '‌古法酿造米酒‌，购买11箱成功',
					time: '2022-05-16 12:14:43',
					color: 'blue--dark',
					integral: '+50'
				}, {
					name: '‌活力维C电解质水‌，购买3箱成功',
					time: '2022-05-15 10:21:08',
					color: 'blue--dark',
					integral: '+50'
				}, {
					name: '‌焦糖拿铁即饮咖啡‌，购买XXXX箱成功',
					time: '2022-05-14 08:56:32',
					color: 'blue--dark',
					integral: '+50'
				}],
			}
		},
		mounted() {
			_this=this;
		},
		methods: {
			// tab选项卡切换
			tabChange(index) {
				_this.current = index
			},
			onButtonClick(e){
				_this.utilNav.navigateTo("/pages/story/applycommission")
			}
		}
	}
</script>

<style>
	.king-list {
		display: block;
	}
	
	.king-list .king-icon {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}
	
	.king-list>.king-item {
		padding: 30rpx 30rpx 30rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}
	
	.king-list>.king-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #E6E6E6;
		left: 60rpx;
		height: 100%;
		top: 0;
		z-index: 8;
	}
	
	.king-list>.king-item::before {
		display: block;
		position: absolute;
		top: 36rpx;
		z-index: 9;
		background-color: #ffffff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		border: none;
		line-height: 50rpx;
		left: 36rpx;
	}
	.status1{
		background-color: #70b603;
		color: #fff;
		padding: 0rpx 10rpx;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}
	.status2{
		background-color: #f59a23;
		color: #fff;
		padding: 0rpx 10rpx;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}

</style>
